@page "/movie"
@layout FrontLayout
@inject HttpClient HttpClient
@inject IJSRuntime Js


<PageTitle>电影</PageTitle>

<div style="margin: 20px auto;">
    <MRow class="movie-header">
        <MCard Elevation="2" Style="width: 100%;">
            <MCardTitle>电影</MCardTitle>
            <MCardText Style="padding-bottom: 2px;">
                <div class="movie-header-des">
                    <div>十年前你笑着看，十年后发现当初的笑点都是泪点，笑中带泪，无厘头中见人生;</div>
                    <div style="margin-top: 2px;">
                        曾经有一份真诚的爱情摆在我面前，我没有珍惜，等到失去的时候才追悔莫及，人世间最痛苦的事情莫过于此。如果上天能够给我一个重新来过的机会，我会对那个女孩子说三个字：‘我爱你’。如果非要给这份爱加上一个期限，我希望是，一万年。
                        做人如果没有梦想，跟咸鱼有什么分别。
                    </div>
                    <div style="margin-top: 5px;font-style: italic;font-weight: bold;color:#03a9f4;">
                        星爷的经典传奇永远不会随时间而泯灭！
                    </div>
                </div>
            </MCardText>
            <MCardText Style="padding-top: 0;">
                @*年份导航标签*@
                <MChipGroup ActiveClass="deep-purple--text text--accent-4" Mandatory>
                    @foreach (var year in totalYears)
                    {
                        <MChip Small Color="@GetTagColor()" OnClick="@(e => GoAnchor($"anchor-{year}"))">
                            @year
                        </MChip>
                    }
                </MChipGroup>
            </MCardText>
        </MCard>
    </MRow>

    <div class="movie-main">
        <MRow Style="margin: 10px;">
            <MTimeline Dense>
                @foreach (var item in movieDataList)
                {
                    <MTimelineItem Small Color="@GetTimelineTitleColor()">
                        <OppositeContent>
                            <span class="@($"headline font-weight-bold {GetTimelineTitleColor()}--text")">
                                item.Year
                            </span>
                        </OppositeContent>
                        <ChildContent>
                            <MCard Elevation="2">
                                <MCardTitle Class="cyan lighten-1" Style="padding: 8px 16px !important;">
                                    @*锚点*@
                                    <span name="@($"anchor-{item.Year}")" id="@($"anchor-{item.Year}")"></span>
                                    <div style="display: flex; flex-direction: column; align-items: start;">
                                        <h3 style="color:purple; font-weight: 500;">@item.Year 年</h3>
                                        @*年度评语*@
                                        <h4 class="text-h6 white--text font-weight-light" style="font-size: 1rem !important; margin-bottom: 0;">
                                            @(GetAnnualReview(item.Year))
                                        </h4>
                                    </div>
                                </MCardTitle>

                                <MCardText>
                                    <MList ThreeLine>
                                        @foreach (var movie in item.List)
                                        {
                                            <MListItem>
                                                <MListItemAvatar Width="150" Height="180" Style="border-radius: 2px;">
                                                    <MImage Width="180" Src="@movie.Img"></MImage>
                                                </MListItemAvatar>
                                                <MListItemContent>
                                                    <MListItemTitle Style="font-weight: 700;">@movie.Name</MListItemTitle>
                                                    <div style="line-height: 16px;font-size: 13px;padding-right: 15px;">
                                                        <div>
                                                            <span>类型：</span>@movie.Category<br />
                                                            <span>地区：</span>@movie.Region<br />
                                                            <span>年份：</span>@movie.Year; 年<br />
                                                            <span>导演：</span>@movie.Director<br />
                                                        </div>
                                                        <div>
                                                            <span>主演：</span>
                                                            @movie.Actors
                                                        </div>
                                                        <!-- 简介 -->
                                                        <div class="video-info-introduction"
                                                     style="max-height: 85px;overflow-y: auto;">
                                                            <span>简介：</span>
                                                            @movie.Intro
                                                        </div>

                                                        @* 评语 *@
                                                        <div style="margin: 10px 0;">
                                                            点评：<span style="color: #fa8c16; font-weight: 500;">@movie.Comment</span>
                                                        </div>

                                                        <MCardActions Style="margin: 0;padding: 0;">
                                                            <MChip Class="ma-2" Color="secondary" Label Small
                                                           Style="margin: 0 !important;">
                                                                <a href="@movie.Url" target="_blank">源站观看</a>
                                                            </MChip>

                                                            <MSpacer></MSpacer>

                                                            <MButton Icon Color="pink"
                                                             OnClick="@(e => ShowVlinksBtnClick(movie.Id,movie.Name))">
                                                                <MIcon>
                                                                    @(vlinksIsExpand[movie.Id] ? "mdi-chevron-up" :
                                                                        "mdi-chevron-down")
                                                                </MIcon>
                                                            </MButton>
                                                        </MCardActions>

                                                        @* 播放链接 *@
                                                        @if (vlinksIsExpand[movie.Id])
                                                        {
                                                            <div style="display: flex; flex-direction: row; flex-wrap: wrap;">
                                                                <MCardText Style="padding: 0;margin: 0 -8px;">
                                                                    @foreach (var vlink in vlinkListMap[movie.Id])
                                                                    {
                                                                        <MChip Class="ma-2" Color="cyan" Small TextColor="white" Label
                                                               OnClick="@(e => GetRealPlayLink(vlink.Name,vlink.Url))"
                                                               Style="margin-top: 6px;margin-bottom: 6px;">
                                                                            @vlink.Name
                                                                        </MChip>
                                                                    }
                                                                </MCardText>
                                                            </div>
                                                        }

                                                    </div>
                                                </MListItemContent>
                                            </MListItem>
                                            <MDivider></MDivider>
                                        }
                                    </MList>
                                </MCardText>
                            </MCard>
                        </ChildContent>
                    </MTimelineItem>
                }
            </MTimeline>


            @*分页*@
            <div class="text-center" style="margin: 8px 0;width: 100%;">
                <MPagination Value="@currentPage"
                             Length="@totalPage"
                             TotalVisible="7" Circle
                             ValueChanged="@paginationChangedAsync">
                </MPagination>
            </div>
        </MRow>

    </div>
</div>


@*视频播放器*@
<MDialog Persistent @bind-Value="@playerIsVisible" MaxWidth="1200" Style="height: 38.1rem;">
    <MCard Style="height: 38rem;">
        <MCardTitle Style="font-size: 0.8rem;padding: 0px 5px;">
            @playerTitle
        </MCardTitle>

        <MCardText Style="padding: 0;margin: 0;height: 88%;">
            <iframe src="@realPlayUrl" style="height: 100%;width: 100%;" frameborder="0" border="0" marginwidth="0"
                    marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"
                    mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen"
                    oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" security="restricted"
                    sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
        </MCardText>

        <MCardActions Style="padding: 5px 8px;">
            <MSpacer></MSpacer>
            <MButton Small Color="light-blue darken-1" Text OnClick="PlayerCloseAsync">
                退出
            </MButton>
        </MCardActions>
    </MCard>
</MDialog>